<template>
	<view class="address">
		<view class="addressBox">
			<view class="flexJusp" style="line-height:112rpx;border-bottom: 2rpx solid #F0F0F0;padding:0 20rpx;">
				<view>姓名</view>
				<input  v-model="username" style="margin-top:36rpx;text-align: right;font-size:28rpx;height:40rpx;" placeholder-style="color: #999999;" placeholder="请输入联系人姓名"  />
			</view>
			<view class="flexJusp" style="line-height:112rpx;border-bottom: 2rpx solid #F0F0F0;padding:0 20rpx;">
				<view>联系电话</view>
				<input maxlength="11" v-model="phone" type="number" style="margin-top:34rpx;text-align: right;font-size:28rpx;height:40rpx;" placeholder-style="color: #999999;" placeholder="请输入联系人电话"/>
			</view>
			<view class="flexJusp" style="line-height:112rpx;border-bottom: 2rpx solid #F0F0F0;padding:0 20rpx;">
				<view>所在区域</view>
				<view @click="xuanze">
					{{areaName||'请选择省市区'}}
				</view>
				<!-- <picker mode="region" @change="bindPickerChange" :value="citys">
					<view v-if="province">{{province}} {{city}} {{area}}</view>
					<view style="color: #999999;" v-else>请选择省市区</view>
				</picker> -->
				<!-- <view style="display: flex;font-size: 28rpx;" @click="addressXuan">
					<view :style="city=='请选择'?'color: #CCCCCC;':''">{{city}}</view>
					<image style="width:28rpx;height:28rpx;margin-top:40rpx;" src="../../../static/images/icon_jt.png"></image>
				</view> -->
			</view>
			<view style="border-bottom: 2rpx solid #F0F0F0;padding:0 20rpx;">
				<view>详细地址</view>
				<textarea v-model="areaDetaile" style="margin-top: 36rpx;  width:670rpx;height: 126rpx;background: #F8F8F8;border-radius: 8rpx;font-size:28rpx;padding:20rpx;margin-bottom:36rpx;" placeholder-style="color: #999;" placeholder="请输入详细地址"></textarea>
			</view>

			<view class="flexJusp" style="line-height:112rpx;padding:0 20rpx;">
				<view>设为默认地址</view>
				<switch color="#2089FF" style="transform:scale(1)" @change="changes"/>
			</view>
		</view>

		<view class="buttons" @click="addAddress">立即保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressId:0,
				areaStatus:0,
				city:'',
				citys:[],
				username:'',
				phone:'',
				areaDetaile:'',
				id:'',
				province:'',
				area:'',
				areaName:'',
				longitude:'',
				latitude:'',
				area:'',
			};
		},
		onLoad(option) {
			if(option.id){
				uni.setNavigationBarTitle({
					title:'编辑收货地址'
				})
				this.id = option.id
				if(this.id){
					this.getAddressInfo()
				}
			}
		},
		methods:{

			xuanze(){
				var that = this
				console.log('点击','--------------')
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
								res.longitude + ',' + res.latitude +
								'&key=b6a2663dc83e037455f2074be7ee0a48&radius=1000&extensions=base',
							success(rex) {
								that.area = rex.data.regeocode.addressComponent.district
								that.areaName = rex.data.regeocode.addressComponent.province+','+ rex.data.regeocode.addressComponent.city+','+ rex.data.regeocode.addressComponent.district
								that.areaDetaile = rex.data.regeocode.formatted_address
							}
						});
					},
					fail(res) {
						console.log(res,'-----------')
					}
				});
			},
			changes(e){
				if(e.detail.value){
					this.areaStatus = 1
				}else{
					this.areaStatus = 0
				}
				console.log(e,'--------')
			},
			getAddressInfo(){
				this.$httpapi('getAddressInfo', 'POST',{id:this.id}).then(res => {
					console.log(res)
					this.addressId = res.data.addressId
					this.areaStatus = res.data.areaStatus
					this.areaName = res.data.areaName
					this.area = res.data.area
					this.city = res.data.city
					this.areaDetaile = res.data.areaDetaile
					this.username = res.data.username
					this.phone = res.data.phone
					this.province = res.data.province
					this.citys[this.province,this.city,this.area]
				})
			},
			bindPickerChange(e){
				console.log(e,'---------')
				this.province = e.detail.value[0]
				this.city = e.detail.value[1]
				this.area = e.detail.value[2]
			},
			// addressXuan(){
			// 	var that = this
			// 	uni.chooseLocation({
			// 		success: (data)=> {
			// 			that.areaDetaile = data.username;
			// 		}
			// 	})
			// },
			addAddress(){
				if(this.username == '') return this.$utils.showtt('请输入客户姓名')
				if(this.phone == '') return this.$utils.showtt('请输入联系人电话')
				if(this.areaDetaile =='') return this.$utils.showtt('请输入详细地址')
				if(this.id){
					this.$httpapi('updateAddress', 'POST',{
						addressId:this.addressId,
						username:this.username,
						phone:this.phone,
						areaName:this.areaName,
						areaDetaile:this.areaDetaile,
						areaStatus:this.areaStatus
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon:'none'
						});
						if(res.code==200){
							setTimeout(()=>{
								uni.navigateBack()
							}, 1500)
						}
					})
				}else{
					// city,province,area
					this.$httpapi('addAddress', 'POST',{
						username:this.username,
						phone:this.phone,
						areaName:this.areaName,
						areaDetaile:this.areaDetaile,
						areaStatus:this.areaStatus,
						longitude:this.longitude,
						latitude:this.latitude,
						area:this.area,
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon:'none'
						});
						if(res.code==200){
							setTimeout(()=>{
								const eventChannel = this.getOpenerEventChannel()
								eventChannel.emit('acceptDataFromOpenedPages');
								uni.navigateBack()
							}, 1500)
						}
					})
				}

			}

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F6FA;
	}
	::placeholder {
	    line-height: normal; /* 确保 placeholder 的行高与文本内容相同 */
	  }
	.address{

		padding:16rpx 0 200rpx;
		.addressBox{
			background: #FFFFFF;
			border-radius: 20rpx;
		}
		.buttons{
			position:fixed;
			bottom:100rpx;
			left:20rpx;
			width: 710rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height:88rpx;
			text-align: center;
		}
	}
</style>
